<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历注册表单</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        form {
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }
        label {
            display: block;
            margin-top: 10px;
        }
        input, textarea, select {
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            box-sizing: border-box;
        }
        button {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
        }
        button:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <h1>个人简历注册表单</h1>
    <form id="resumeForm">
        <!-- 个人基本信息 -->
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name" required>

        <label for="gender">性别：</label>
        <select id="gender" name="gender" required>
            <option value="">请选择</option>
            <option value="男性">男</option>
            <option value="女性">女</option>
        </select>

        <label for="dob">出生年月：</label>
        <input type="date" id="dob" name="dob" required>

        <label for="hometown">籍贯：</label>
       <input type="hometown" id="hometown" name="hometown" required>

        <label for="hobbies">兴趣爱好：</label>
        <textarea id="hobbies" name="hobbies" rows="3"></textarea>

        <label for="address">住址：</label>
        <input type="text" id="address" name="address" required>

        <label for="phone">联系电话：</label>
        <input type="tel" id="phone" name="phone" pattern="[0-9]{11}" required>

        <!-- 教育背景 -->
        <label for="school">学校：</label>
        <input type="text" id="school" name="school" required>

        <label for="major">专业：</label>
        <input type="text" id="major" name="major" required>

        <label for="rank">专业排名：</label>
        <input type="number" id="rank" name="rank" min="1" required>

        <!-- 奖励情况 -->
        <label for="awards">奖励情况（参加项目或竞赛、课程成绩等）：</label>
        <textarea id="awards" name="awards" rows="4"></textarea>

        <!-- 专业技能 -->
        <label for="skills">专业技能（技能名称及掌握程度，用逗号分隔）：</label>
        <input type="text" id="skills" name="skills" required>

        <!-- 自我评价 -->
        <label for="selfEvaluation">自我评价：</label>
        <textarea id="selfEvaluation" name="selfEvaluation" rows="5" required></textarea>

        <button type="submit">注册</button>
    </form>

    <script>
        document.getElementById('resumeForm').addEventListener('submit', function (event) {
            event.preventDefault(); // 阻止默认提交行为

            // 获取表单数据
            const formData = {
                name: document.getElementById('name').value,
                gender: document.getElementById('gender').value,
                dob: document.getElementById('dob').value,
                hometown: document.getElementById('hometown').value,
                hobbies: document.getElementById('hobbies').value,
                address: document.getElementById('address').value,
                phone: document.getElementById('phone').value,
                school:document.getElementById('school').value,
                major: document.getElementById('major').value,
                rank: document.getElementById('rank').value,
                awards: document.getElementById('awards').value,
                skills: document.getElementById('skills').value,
                selfEvaluation: document.getElementById('selfEvaluation').value
            };

            // 将表单数据存储到 localStorage
            localStorage.setItem('resumeData', JSON.stringify(formData));

            // 跳转到个人简历页面
            window.location.href = 'show.html';
        });
    </script>
</body>
</html>